import React, { useState } from "react";
import { NavLink, Outlet } from "react-router-dom";
import homecss from "@/assets/css/home.module.less";
import logo from "@/assets/img/logo.png";
import { BigRouters } from "@/router/index";
console.log(BigRouters);
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
// import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme, Button } from "antd";

// console.log(routers, "routes");

const { Header, Content, Sider } = Layout;

// type MenuItem = Required<MenuProps>["items"][number];
// function getItem(
//   label: React.ReactNode,
//   key: React.Key,
//   icon?: React.ReactNode,
//   children?: MenuItem[]
// ): MenuItem {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   } as MenuItem;
// }

// const items: MenuItem[] = [
//   getItem("首页", "/home", <PieChartOutlined />),
//   getItem("Option 2", "2", <DesktopOutlined />),
//   getItem("User", "sub1", <UserOutlined />, [
//     getItem("Tom", "3"),
//     getItem("Bill", "4"),
//     getItem("Alex", "5"),
//   ]),
//   getItem("Team", "sub2", <TeamOutlined />, [
//     getItem("Team 1", "6"),
//     getItem("Team 2", "8"),
//   ]),
//   getItem("Files", "9", <FileOutlined />),
// ];
const render = (arr: any) => {
  let items: any = [];
  arr &&
    arr.forEach((item: any, index: any) => {
      items.push({
        key: index,
        icon: item.icon,
        label: <NavLink to={item.path}>{item.title}</NavLink>,
        children: item.children && render(item.children),
      });
    });
  console.log(items, "items");
  return items;
};

function Home() {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        style={{ background: "white" }}
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className={homecss.sider_herader}>
          <img src={logo} alt="logo" />
          <span>BIG CUTE</span>
        </div>
        <Menu
          theme="light"
          defaultSelectedKeys={["0"]}
          mode="inline"
          items={render(BigRouters)}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            paddingLeft: "10px",
            paddingTop: "10px",
            background: colorBgContainer,
            display: "flex",
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 40,
              height: 40,
            }}
          />
          <Breadcrumb
            items={[
              { title: "面包屑", key: "home" },
              { title: "首页", key: "home/index" },
            ]}
            separator="/"
            style={{ marginTop: "10px", marginLeft: "10px" }}
          />
        </Header>

        <Content>
          {/* style={{ margin: "10px 16px" }} */}
          <div
            style={{
              padding: 10,
              minHeight: 720,
              background: "#f0f2f5",
              borderRadius: borderRadiusLG,
            }}
          >
            <div className={homecss.headers}>头部导航</div>
            <Outlet></Outlet>
          </div>
        </Content>
        {/* <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer> */}
      </Layout>
    </Layout>
  );
}

export default Home;
